<template>
  <el-cascader style="width: 100%" ref="cascader" filterable :clearable="clearable" :placeholder="placeholder"
    :key="cascaderKey" :disabled="disabled" v-model="departmentId" :options="options" :props="props" @change="change">
  </el-cascader>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: '请选择',
    },
    ids: {
      type: String,
      default: '',
    },
    value: "",
    options: {
      default: [],
    },
    props: {},
    disabled: {
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      departmentId: [],
      item: "",
      cascaderKey: 1,
    };
  },
  watch: {
    options: {
      immediate: false,
      handler(val) {
        ++this.cascaderKey;
        this.start();
      },
    },
    value: {
      immediate: true,
      handler(val) {
        this.start();
      },
    },
    ids: {
      immediate: true,
      handler(val) {
        // if (!this.value || this.value.length < 1) {
        this.departmentId = this.getIdsToValue(val, this.options);
        // }
      },
    },
  },
	created() {
		// console.log(this.options);
	},
  methods: {
    start() {
      if (this.value && this.value.length > 0) {
        this.departmentId = this.value;
      } else {
        this.departmentId = [];
      }
    },
    //获取Cascader值的id并拼接
    getIds(val) {
      if (val && val.length > 0) {
        //多选时多了一层结构
        if (this.props.multiple) {
          const idArray = val.map(item => {
            return item[item.length > 1 ? item.length - 1 : 0]
          })
          return idArray.join(',')
        } else {
          return val[val.length - 1]
        }
      } else {
        return ''
      }
    },
    //接口返回的ids转成Cascader值的格式
    getIdsToValue(ids, treeData) {
      let val = ids.split(',');
      if (val && val.length > 0) {
        //多选时多了一层结构
        if (this.props.multiple) {
          return val.map(item => {
            const itemIds = this.getTreeDeepArr(item, treeData)
            return itemIds
          })
        } else {
          const itemIds = this.getTreeDeepArr(val, treeData)
          return itemIds
        }
      } else {
        return []
      }
    },
    getTreeDeepArr(key, treeData) {
      let arr = []; // 在递归时操作的数组
      let returnArr = []; // 存放结果的数组
      let depth = 0; // 定义全局层级
      // 定义递归函数
      function childrenEach(childrenData, depthN) {
        for (var j = 0; j < childrenData.length; j++) {
          depth = depthN; // 将执行的层级赋值 到 全局层级
          arr[depthN] = (childrenData[j].id);
          if (childrenData[j].id == key) {
            // returnArr = arr; // 原写法不行, 因 此赋值存在指针关系
            returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组，截断并保存到结果数组，
            break
          } else {
            if (childrenData[j].children) {
              depth++;
              childrenEach(childrenData[j].children, depth);
            }
          }
        }
        return returnArr;
      }
      return childrenEach(treeData, depth);
    },
    change(val) {
      // console.log(val)
      this.$emit("input", val);
    },
  },
};
</script>

<style>
</style>